<template>
	<div class="visitorBody">
		<div class="chatCenter">
        <div class="chatEntTitle">
            <el-badge :type="entInfo.onlineType" is-dot class="item">
                <el-avatar class="chatEntTitleLogo" :size="35" :src="entInfo.avatar"></el-avatar>
            </el-badge>
            <div>
                <div>{{entInfo.nickname}}</div>
                <div class="entIntro" v-show="entInfo.introduce!=''">{{entInfo.introduce}}</div>
            </div>
        </div>
		</div>
	</div>
</template>

<script>
	export default {
	  name: 'ChatPage',
		data() {
		  return {
			loading:false,
			entInfo:{
				onlineType:"success",
				nickname:"",
				introduce:"",
				avatar:"",
			},
		  }
		},
		methods: {
			visitorLogin(){
				var _this=this;
				this.$axios.post(this.ApiHost+'/visitor_login', {
					ent_id:"5",
					to_id:"taoshihan",
				}).then(function (response) {
					var code=response.data.code;
					var msg=response.data.msg;
					
					if(code!=200){
						_this.$message({
						  message: msg,
						  type: 'error'
						});
						return ;
					}
					var kefu=response.data.kefu;
					_this.entInfo.introduce=response.data.entIntroduce;
					_this.entInfo.nickname=kefu.username;
					_this.entInfo.avatar=kefu.avatar;
					if(response.data.alloffline){
						_this.onlineType="danger";
					}else{
						_this.onlineType="success";
					}
				}).catch(function (error) {
						_this.$message({
						  message: error.message,
						  type: 'error'
						});
				});
			}
		},
		mounted: function () {
			this.visitorLogin()
		}
	}
</script>

<style lang="scss">
	.chatCenter {
		width: 100%;
		height: 100%;
	    background: #fff;
	    max-width: 900px;
	    margin: 0 auto;
	    box-shadow: 2px 2px 6px rgb(0 0 0 / 30%);
	    border-top: none;
	    overflow: hidden;
		@media screen and (min-width: 900px){
			max-height: 780px;
			box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
			border-radius: 8px;
		}
	}
	.visitorBody {
		height: 100vh;
		background-color: #eef0f6;
		@media screen and (min-width: 900px){
		    display: flex;
		    justify-content: center;
		    align-items: center;
		}
	}
	.chatEntTitle {
		display: none;
		width: 100%;
		z-index: 9;
		margin: 0 auto;
		height: 70px;
		overflow: hidden;
		font-size: 16px;
		color: #fff;
		overflow: hidden;
		background-color: #4e6ef2;
		align-items: center;
		@media screen and (min-width: 900px){
		    display: flex;
		}
	}
	
	.entIntro {
	    font-size: 12px;
	    margin-top: 5px;
	    color: #f9f9f9;
	}
	.chatEntTitle .el-badge__content.is-fixed.is-dot {
	    right: 17px;
	    bottom: -5px;
	    top: unset;
	}
	.chatEntTitleLogo {
	    margin-left: 15px;
		margin-right: 10px;
	}
</style>